<template>
	<div class="pr">
		<div ref="echartsRef" class="card" :style="{ height, width }"></div>
		<el-button type="primary" size="small" :icon="Download" @click="downloadFile" v-if="showDownFile" class="ml10 down-btn"
			>导出</el-button
		>
	</div>
</template>

<script setup lang="ts" name="lineChart">
import { ref, nextTick, watch } from 'vue';
import { Download } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { useEcharts } from '@/hooks/useEcharts';

type Echarts = {
	series: any;
	yAxisData?: Array<string>;
	width?: number | string;
	height?: number | string;
	legend?: any; // 饼图底部显示
	grid?: any;
	xAxis?: any;
	yAxisType?: any;
	axisLabel?: any;
	showDownFile?: boolean;
	yAxis?: any;
	yAxisUnit?: string; // 单位
};

const prop = withDefaults(defineProps<Echarts>(), {
	showDownFile: true,
	legend: {
		show: true,
		left: 'center',
		top: 'top',
		textStyle: {
			color: '#a1a1a1'
		}
	},
	grid: {
		top: '0',
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	yAxisType: 'category',
	height: '322px',
	width: '100%',
	yAxisData: () => [],
	xAxis: {
		type: 'value',
		boundaryGap: [0, 0.01]
	},
	axisLabel: {
		overflow: 'truncate', // 溢出隐藏
		width: 120 // 设置文本宽度
	}
});

const chartInstance = ref<echarts.ECharts | null>(null);
const echartsRef = ref<HTMLElement>();
const initEcharts = () => {
	const myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
	chartInstance.value = myChart;
	const option: echarts.EChartsOption = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: prop.legend,
		grid: prop.grid,
		xAxis: prop.xAxis,
		yAxis: prop.yAxis ?? {
			type: prop.yAxisType,
			data: prop.yAxisData,
			axisLabel: prop.axisLabel,
			name: prop.yAxisUnit ?? ''
		},
		series: prop.series
	};
	useEcharts(myChart, option);
};

// 外面调用下载echarts图表图片
const saveAsImage = (fileName: string, isDownloadImg = false): string => {
	if (chartInstance.value) {
		const imageUrl = chartInstance.value.getDataURL({
			pixelRatio: 2, // 图片清晰度
			backgroundColor: '#fff', // 背景颜色
			excludeComponents: ['toolbox'], // 排除工具箱
			type: 'png' // 图片格式
		});

		// 是下载图片返回base64
		if (isDownloadImg) {
			// 创建隐藏的可下载链接
			const link = document.createElement('a');
			link.style.display = 'none';
			link.href = imageUrl;
			link.setAttribute('download', `${fileName}.png`); // 设置文件名
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			return '';
		} else {
			return imageUrl;
		}
	} else {
		return '';
	}
};

watch(
	() => prop.series,
	() => {
		nextTick(() => {
			initEcharts();
		});
	},
	{ immediate: true, deep: true }
);

interface ModelEmits {
	(e: 'downloadFile', value: string): void;
}
const emit = defineEmits<ModelEmits>();
// 导出操作，给后台导出传入base64图片
const downloadFile = () => {
	if (chartInstance.value) {
		const imageUrl = chartInstance.value.getDataURL({
			pixelRatio: 2, // 图片清晰度
			backgroundColor: '#fff', // 背景颜色
			excludeComponents: ['toolbox'], // 排除工具箱
			type: 'png' // 图片格式
		});
		emit('downloadFile', imageUrl);
	} else {
		emit('downloadFile', '');
	}
};

defineExpose({
	saveAsImage,
	initEcharts
});
</script>

<style scoped lang="scss">
.down-btn {
	position: absolute;
	top: 4px;
	right: 4px;
}
</style>
